<template>
  <div class="search_input">
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      show-action
      input-align="center"
      @blur="onSearch"
    >
      <template #action>
        <div @click="$router.go(-1)">取消</div>
      </template>
    </van-search>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell
        v-for="item in list"
        :key="item"
        :title="item.communityName"
        @click="submit(item.communityName)"
      />
      <!-- 空状态 -->
      <van-empty description="暂时没有哦" v-if="flag" />
    </van-list>
  </div>
</template>
<script>
import { getAreaCommunity } from '@/api/area'
export default {
  name: '',
  data () {
    return {
      list: [],
      value: '',
      flag: 'false',
      loading: false,
      finished: false,
      id: this.$route.query.cityId || 'AREA|88cff55c-aaa4-e2e0'
    }
  },
  methods: {
    onLoad () {
      // 异步更新数据

      // 加载状态结束
      this.loading = false
      // 数据全部加载完成
      if (this.list.length >= 40) {
        this.finished = true
      }
    },
    async onSearch () {
      console.log(1)
      const { body } = await getAreaCommunity(this.value, this.id)
      // console.log(data)
      this.list = [...body]
      if (this.list.length === 0) {
        this.flag = true
      }
    },
    submit (name) {
      this.$router.push({
        path: '/releaseHouse',
        query: {
          name
        }
      })
    }
  }
}
</script>
<style lang="less" scoped></style>
